<template>
  <div class="app-container">
    <div class="top-button">
      <el-button type="primary" @click="addUser" size="small">添加用户</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="角色">
        <template slot-scope="scope">
          <span>{{ scope.row.role }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="240px" label="操作">
        <template slot-scope="scope">
            <el-button @click="modifyUser(scope.row)" type="primary" size="small" icon="el-icon-edit">
              修改
            </el-button>
            <el-button @click="deleteUser(scope.row.id)" type="primary" size="small" icon="el-icon-delete">
              删除
            </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddUser @getList="getList" ref="user" :title="title"></AddUser>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import AddUser from './addUser.vue'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: { Pagination, AddUser },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      title: '添加用户',
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    modifyUser (item) {
      this.title = '编辑用户'
      this.axios.get('http://81.70.46.38:8080/user/getById', {
        params: {
          id: item.id
        },
        withCredentials: true
      }).then( res => {
        var arr = []
        for (var i = 0; i < res.data.result.roleList.length; i++) {
          arr.push(res.data.result.roleList[i].id)
        }
        this.$refs.user.id = item.id
        this.$refs.user.isPWD = false
        this.$refs.user.form = {
          realname: res.data.result.name,
          username: res.data.result.username,
          password: '',
          selectValue: arr
        }
        this.$refs.user.dialogVisible = true;
      })
    },
    deleteUser (id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .get("http://81.70.46.38:8080/user/delete", {
              params: {
                id: id
              },
              withCredentials: true
            })
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList()
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addUser () {
      this.title = '添加用户'
      this.$refs.user.dialogVisible = true
    },
    getList() {
      this.listLoading = true
      this.axios.get("http://81.70.46.38:8080/user/list", {
        params: {
          pageNum: this.listQuery.page,
          pageSize: this.listQuery.limit
        },
        withCredentials: true
      }).then(res => {
        this.listLoading = false
        this.total = res.data.result.total
        for (var i = 0; i < res.data.result.list.length; i++) {
          var str = ''
          for (var j = 0; j < res.data.result.list[i].roleList.length; j++) {
            if (j === res.data.result.list[i].roleList.length - 1) {
              str += res.data.result.list[i].roleList[j].name
            } else {
              str += res.data.result.list[i].roleList[j].name + ','
            }
          }
          res.data.result.list[i].role = str
        }
        this.list = res.data.result.list
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.top-button {
  margin-bottom: 15px;
}
</style>
